<template>
  <view class="main" v-if="isVisible">
    <!-- 发送者信息区域 -->
    <view class="senderInfo">
      <view class="nicbox">
        <image class="nic" :src="videoInfo.nicPic" mode=""></image>
      </view>
      <view class="nicname">
        <text style="font-size: 28rpx; font-weight: 500;color: white;">{{videoInfo.nicName||videoInfo.sendUserId}}</text>
        <text style="font-size: 24rpx;color: white;">{{videoInfo.sendUserId}}</text>
      </view>
      <view class="sendtime">
        <text style="font-size: 22rpx;color: white;">{{formatMessageTime(videoInfo.timestamp)}}</text>
        <text style="font-size: 22rpx;color: white;">{{formatDistance(videoInfo)}}</text>
      </view>
    </view>
    <!-- 视频播放区域 -->
    <video id='myVideo' class="video" :src="path" autoplay="true" @ended="ended" page-gesture="true"></video>
    <!-- 按钮操作区域 -->
    <view class="btnbox">
      <view class="btn">
        <uni-icons type="left" size="20" color="white"></uni-icons>
        <uni-icons type="right" size="20" color="white"></uni-icons>
      </view>
      <view class="closebtn" style="align-self: flex-end;" @click="close"><uni-icons type="closeempty" size="20" color="white" ></uni-icons></view>
    </view>
  </view>
</template>

<script>
import formatMessageTime from'../utils/formatMessageTime.js'
import { formatDistance } from '../utils/distance.js';
import {getVideoInfo, playVideo }from '../utils/playVideo.js'
export default {
  name: 'videoPlay',
  props: {
	videoInfo:{
		type:Object,
		required:true
	}
  },
  data() {
    return {
		path: '',
		isVisible:false,
		videoContext:null
	};
  },
  watch:{
	videoInfo:{
		handler(newval){
			console.log(newval)
			if(Object.keys(this.videoInfo).length>0){
								this.play(this.videoInfo)
							}
			}
		
		}
	 
  },
  mounted() {
	  console.log('视频组件起来了')
        this.videoContext = uni.createVideoContext('myVideo',this);
	},
  methods: {
	async play(data){
	  const res=  await playVideo(data)
	  console.log(res)
	  if(res.isVideoShow){
		this.isVisible=true
		this.path=res.videoPath 
	  }
	 
	},
	
	close() {
		this.isVisible=false
		this.$emit('closeVideo')
	},
    formatMessageTime,
	formatDistance,
    ended() {
      // 视频播放结束时触发 closeVideo 事件，通知父组件关闭视频
    this.isVisible=false
	this.$emit('closeVideo')
	
    }
  }
};
</script>

<style lang="scss" scoped>

.main {
  display: flex;
  position: fixed;
  top: 200rpx;
  left: 125rpx;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  width: 500rpx;
  height: 650rpx;
  border-radius: 25rpx;
  box-shadow: 5rpx 5rpx 5rpx 2rpx rgba(0, 0, 0, 0.5);
  background-color: black;
}
.video {
  width: 500rpx;
  height: 500rpx;
  border-radius: 30rpx;
}
.icon {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  z-index: 200;
}
.senderInfo {
  display: flex;
  background-color: black;
  flex-direction: row;
  justify-content: space-around;
  height: 80rpx;
  width: 500rpx;
  padding-right: 20rpx;
}
.nicbox {
  width: 64rpx;
  height: 64rpx;
  border-radius: 32rpx;
}
.nic {
  width: 64rpx;
  height: 64rpx;
  border-radius: 32rpx;
}
.btnbox {
  display: flex;
  height: 50rpx;
  width: 500rpx;
  background-color: black;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  padding-right: 30rpx;
}
.btn {
  display: flex;
  flex-direction: row;
  width: 400rpx;
  height: 50rpx;
  align-items: center;
  justify-content: space-around;
}
.closebtn {
  position: absolute;
  right: 10rpx;
  bottom: 5rpx;
}
</style>